<template>
	<view class="page">
		<u-toast ref="uToastRef"></u-toast>
		<up-text text="登录" size="50rpx" bold></up-text>
		<view class="form">
			<u--form :model="form" :rules="rules" ref="formRef" errorType="message" @validateFailed="showToast">
				<u-form-item prop="username">
					<u--input v-model="form.username" border="none" placeholder="请输入登录账号" prefixIcon="list"
						prefixIconStyle="font-size: 22px;color: #909399">
					</u--input>
				</u-form-item>
				<u-form-item prop="password">
					<u--input v-model="form.password" :password="showPassword" border="none" placeholder="登录密码"
						prefixIcon="list" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
					<u-icon name="lock" size="50" @click="showLock"></u-icon>
				</u-form-item>
			</u--form>
			<view class="flex formBtn">
				<view>验证码登录</view>
				<view @click="jump('/pages/resetPassword/resetPassword1')">忘记密码？</view>
			</view>
			 <u-row style="flex-wrap: wrap;">
				<u-col span="12">
					<u-button class="loginBtn" @click="loginBtn">登录</u-button>
				</u-col>
				<u-col span="12" textAlign="center">
					<view @click="jump('/pages/register/register')">用户注册</view>
				</u-col>
			</u-row>
		</view>
		<view class="bottom">
			<u-radio-group v-model="userAgreement" size="30" iconSize="20">
				<u-radio shape="circle" :name="true"></u-radio>
				<span>已阅读同意</span>
				<span class="Agreement">《用户服务协议》</span>和<span class="Agreement">《隐私政策》</span>
			</u-radio-group>
		</view>
	
		<u-toast ref="uToasts"></u-toast>
	</view>
</template>

<script>
	import  store  from '../../store/index.js';
	import { login } from '@/config/api/user.js'
	export default{
		data() {
			return{
				form:{
					username:"",
					password:""
				},
				
				// 登录校验
				rules: {
					username: [{
							required: true,
							message: '此为必填字段',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['blur', 'change']
						},
						// 6-8个字符之间的判断
						{
							max: 10,
							message: '长度最多10个字符之间',
							trigger: ['blur', 'change']
						},
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: ['blur']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['blur', 'change']
						},
						// 6-10个字符之间的判断
						{
							min: 6,
							max: 10,
							message: '长度在6-10个字符之间',
							trigger: ['blur', 'change']
						},
					]
				},
						
				// 是否展示密码
				showPassword: true,
				
				// 用户协议状态
				userAgreement:false
			}
			
		},
		
		methods:{
			showToast({ prop, message }) {
			      uni.showToast({
			        title: message,
			        icon: 'none'
			      });
			    },
			jump(url){
				uni.navigateTo({
					url
				})
			},
			
			// 是否显示密码
			showLock() {
				this.showPassword = !this.showPassword
			},
			
			// 登录
			loginBtn() {
				if(this.userAgreement){
					this.$refs.formRef.validate()
						.then(res => login(this.form))
						// 判断请求是否成功
						.then(Logres => {
							return new Promise((res, rej)=>{
								if (Logres.code == 200) {
									 store.dispatch("setToken", { token: Logres.token })
									 res(Logres)
								}
								 else rej(Logres.msg)
							})
						})
						// userID 请求完毕，跳转页面
						.then(()=>{
							this.$refs.uToasts.show({
								message: "登录成功!"
							})
			
							uni.switchTab({
								url:"/pages/home/home"
							})
						})
						.catch(errors => {
							this.$refs.uToasts.show({
								message:"登录失败，请稍后重试"
							})
						})
				}else{
					this.$refs.uToasts.show({
						message: "请先勾选用户服务协议"
					})
				}
			
			}
		}
	}
</script>

<style scoped>
	/* 页面 */
	.page {
		padding: 20% 5% 5% 5%;
	}
	
	/* 表单 */
	.form {
		margin-top: 80rpx;
	}
	
	/* 表单输入框 */
	.u-form-item {
		margin-top: 50rpx;
		border-bottom: 1px solid #E7E7E7;
	}
	
	/* 注册按钮组 */
	.formBtn {
		margin-top: 40rpx;
		justify-content: space-between;
	}
	
	.loginBtn{
		font-size: 40rpx;
		padding: 50rpx 0;
		color: white;
		background-color: #555555;
		border-radius: 100rpx;
		margin: 50rpx 0;
	}
	
	/* 底部 */
	.bottom {
		position: fixed;
		bottom: 40rpx;
	}
	
	.Agreement {
		border-bottom: 1px solid black;
	}
</style>